<!--
 * @Description: 表格及分页组件
 * @Author: Chenx
 * @Date: 2023-04-10 10:46:06
 * @LastEditors: Chenx
 * @LastEditTime: 2023-04-18 16:15:32
-->
<script lang="ts" setup>
import { ElTable } from 'element-plus'

const tableRef = ref<InstanceType<typeof ElTable>>()

type columnVo = {
  prop?: string,
  label?: string,
  width?: string | number,
  type?: string
}
const props = defineProps({
  tableColumnList: {
    type: Array as () => Array<columnVo>,
    required: true,
    default: () => []
  },
  tableData: {
    type: Array as () => Array<any>,
    required: true,
    default: () => []
  },
  pageNum: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  dataTotal: {
    type: Number,
    require: true,
    default: 0
  },
  multiple: {
    type: Boolean,
    default: true
  },
  borderFlag: {
    type: Boolean,
    default: true
  },
  loading: Boolean,
  isOperate: {
    type: Boolean,
    default: true
  }
})
const currentPage = computed(() => props.pageNum)
const emit = defineEmits(['handleSelectionChange', 'getData', 'checkClick', 'editClick'])
const handleSelectionChange = (val: []) => {
  emit('handleSelectionChange', val)
}
//  单行点击事件
const getData = (val: []) => {
  emit('getData', val)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>
<template>
<div class="tableBox">
  <el-table ref="tableRef" :data="props.tableData" :border="props.borderFlag" stripe style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange"
      @row-click="getData"
  >
    <!-- 第一列选中框 -->
      <el-table-column
        v-if="props.multiple"
        type="selection"
        width="55"
      />
    <el-table-column
        v-for="(item, index) in props.tableColumnList"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width ? item.width: 180"
        :type="item.type"
      >
        <template #default="scope">
          <!-- 该列是否展示为图片 -->
          <div v-if="item.prop === 'img'">
            <img
              class="table_icon"
              :src="scope.row.img"
              alt=""
            >
          </div>
        </template>
    </el-table-column>
    <el-table-column
        fixed="right"
        :label="$t('common.operate')"
        width="200"
      >
        <template
          #default="scope"
        >
          <div v-if="isOperate">
            <el-button
              link
              type="primary"
              size="small"
              @click="$emit('checkClick', scope.row)"
            >
              {{ $t('common.view') }}
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="$emit('editClick', scope.row)"
            >
              {{ $t('common.edit') }}
            </el-button>
          </div>
          <slot
            name="operate"
            v-if="!isOperate"
            :message="scope.row"
          />
        </template>
      </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination v-model:current-page="currentPage"
        :page-size="props.pageSize" @current-change="handleCurrentChange" background layout="prev, pager, next, jumper, total, slot" :total="dataTotal">
        <span class="pageSlot">显示{{ (currentPage - 1) * 10 + 1 }}-{{ Math.min(currentPage * 10, dataTotal) }}条</span>
    </el-pagination>
  </div>
</div>
</template>
<style lang="scss" scoped>
.pagination{
  display: flex;
  justify-content: end;
  margin-top: 20px;
  .pageSlot{
    margin-left: 10px;
  }
}
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: #EAF4FF; // 斑马纹底色
}
:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: #D4E8FD; // 分页背景颜色
  color: #fff;
}
:deep(.el-table__inner-wrapper){
  width: 100%;
  .el-table__header{
    .el-table__cell{
      background-color: #D4E8FD;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #242424;
      text-align: center;
    }
  }
  .el-table__body{
    .el-table__cell{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #737B8B;
      text-align: center;
    }
    .el-button{
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #216FED;
      margin: 0 10px;
    }
    .table_icon{
      width: 30px;
      height: 30px;
    }
  }

}
</style>
